<template>
   <table class="table table-bordered" >
     <tbody>
         <tr align="center" class="bg-primary">
             <td>编号</td>
             <td>姓名</td>
             <td>年龄</td>
             <td>性别</td>
         </tr>
           <tr align="center" v-for="item in students" :key="item.id" class="btn btn-primary">
             <td>{{ item.id }}</td>
             <td>{{item.name}}</td>
             <td>{{item.age}}</td>
             <td>{{item.sex}}</td>
         </tr>
     </tbody>
   </table>
  
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

let students = reactive([
     { id: "1", name: "张飞", age: 18, sex: "男" },
     { id: "2", name: "燕飞", age: 20, sex: "女" },
                { id: "3", name: "孔明", age: 35, sex: "男" },
                { id: "4", name: "貂蝉", age: 17, sex: "女" },
                { id: "5", name: "孔融", age: 23, sex: "男" }

])
</script>

<style scoped>

</style>